<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" 
			:style="{width: width+'rpx',height: height+'rpx'}">
				<video
				direction=0
				
				v-if="judgmentFile(item)"
				style="width: 100%;height: 100%;"
				:controls=controls
				:src="item"
				:show-center-play-btn=!controls
				:data-id="item"
				:id="item" 
				@ended="ended"
				@play="playClick"
				@fullscreenchange="fullscreenchange"
				>
				</video>
				<image v-else  style="width: 100%;height: 100%;" :src="item"
					@click="previewImage(index)"></image>
			</view>
			
		</view>
		
	</view>


</template>

<script>
	
	export default {

		props: {
			//图片视频列表
			list: {
				type: Array,
				default: []
			},
			//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
			//视频宽度小需要隐藏掉
			//设置为false 播放视频会进入全屏
			isButton: {
				type: Boolean,
				default: false
			},
			//宽度
			width: {
				type: [Number,String],
				default: 220
			},
			//高度
			height: {
				type: [Number,String],
				default: 220
			},
			
			
		},
		data() {
			return {
				controls:this.isButton ?true :false,   //是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
				
			}
		},
		created() {
			console.log('created',this.isButton)
			
		},
		methods: {
			//预览图片
			previewImage(index) {
				
				uni.previewImage({
					current: index,
					urls: this.list,

				});

			},
			//检测全屏退出全屏
			fullscreenchange(e){
				console.log(this.isButton)
				if(this.isButton){
					return
				}
				//进入全屏显示底部操作栏 
				if(e.detail.fullScreen ==true){
					this.controls=true
					console.log('进入全屏',this.controls)
				}else{
					console.log('退出全屏',this.controls)
					//退出全屏刷新组件 不然中间播放按钮不会显示
					this.$emit('reload')
					//退出全屏暂停播放，隐藏底部操作栏 
					// this.controls=false
					// let currentId = e.currentTarget.dataset.id
					// let videoContent = uni.createVideoContext(currentId)
					
					
				}
			},
			//播放到末尾退出全屏
			ended(e){
				if(this.isButton){
					return
				}
				let currentId = e.currentTarget.dataset.id
				let videoContent = uni.createVideoContext(currentId)	
				videoContent.exitFullScreen()
			},
			// 播放时进入全屏
			playClick(e) {
				let _this = this
				let currentId = e.currentTarget.dataset.id
				if(!this.isButton){
					let videoContent = uni.createVideoContext(currentId)
					//ios必须加上这行代码 竖屏模式播放
					videoContent.requestFullScreen({direction: 0})
				}
				//停止其他视频播放
				this.cease(currentId)
				
			},
			//停止其他视频播放
			cease(currentId){
				this.list.forEach(item=>{
					if(item != currentId){
						uni.createVideoContext(item).pause()
					}
				})
			},
			//判断是否是视频格式的文件
			judgmentFile(picUrl) {
			  let filename = picUrl; //文件路径地址
			  let index1 = filename.lastIndexOf(".");
			  let index2 = filename.length;
			  let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
			  //判断文件后缀名是否等于视频文件的后缀名
			  if (postf==".avi"||postf==".mp4"||postf==".rmvb"||postf==".mov"||postf==".MOV"||postf==".wmv"||postf==".flv") {
			    return true
			  }else{
			    return false
			  }
			}


			
			
			

			
		}
	}
</script>

<style lang="scss">
	.list{
	
		
		display: flex;
		flex-wrap: wrap;
		.item{
			
			margin-top: 10rpx;
			margin-right: 10rpx;
		}
	}

</style>
